<script setup lang="ts">
import {ref} from 'vue'
import {useAnalysetStore} from "@/store";
import AnalyesAPI from "@/api/system/analyes";
import router from "@/router";

const analyseStatusPage = useAnalysetStore()
const form = ref({})
const qcForm = ref({})
const analyseTableList = ref([])
const personnelList = ref([])
const userForm = ref({
  analysis_uid: '',
  notes: '',
  paramsString: '',
})
const activeName = ref('first')
const activeTableName = ref('first')
onMounted(() => {
  // 分析单详情
  getStatusPageDetail()
  //   获取分析人
  getPersonnelList()
})
const handleClick = (tab) => {
  activeName.value = tab.props.name
}

// 获取分析单详情
function getStatusPageDetail() {
  AnalyesAPI.echoCgDetailTable({task_id: analyseStatusPage.sampleStatus.taskId, type: 2}).then(data => {
    console.log('分析单详情', data)
    form.value = {...data.order, ...data.task_info}
    analyseTableList.value = data.test_parms
  })
}

// 获取分析人
function getPersonnelList() {
  AnalyesAPI.getPersonnel({group_id: 3}).then(data => {
    personnelList.value = data
  })
}

function handleConfirmReceipt() {
  let paramsList = analyseTableList.value.map(item => item.id)
  console.log(paramsList)
  const formData = new FormData()
  formData.append('task_id', analyseStatusPage.sampleStatus.taskId);
  formData.append('params', JSON.stringify(paramsList));
  AnalyesAPI.sampleconfirm(formData).then(data => {
    router.push({
      path: '/analyse/sample'
    })
  })
}

</script>

<template>
  <div class="card">
    <el-card class="box-card">
      <el-row>
        <el-col :span="6" class="syc-flex syc-flex-align-center ">
          任务名称：{{ form.task_name }}
        </el-col>
        <el-col :span="6" class="syc-flex syc-flex-align-center ">
          任务单号：{{ form.task_number }}
        </el-col>
        <el-col :span="6" class="syc-flex syc-flex-align-center ">
          关联委托单号：{{ form.order_number }}
        </el-col>
        <el-col :span="6" class="syc-flex syc-flex-align-center ">
          项目名称：{{ form.project_name }}
        </el-col>
        <el-col :span="6" class="syc-flex syc-flex-align-center ">
          检测周期：{{ form.test_period }}
        </el-col>
        <el-col :span="6" class="syc-flex syc-flex-align-center ">
          采样地点：{{ form.task_address }}
        </el-col>
        <el-col :span="6" class="syc-flex syc-flex-align-center ">
          分派人：{{ form.issueder }}
        </el-col>
        <el-col :span="6" class="syc-flex syc-flex-align-center ">
          分派时间：{{ form.issuedtime }}
        </el-col>
      </el-row>
    </el-card>
    <!--    表格内容-->
    <el-scrollbar height="360px">
      <el-card class="box-card" style="margin-top: 30px">
        <el-table style="width: 100%" border :data="analyseTableList">
          <el-table-column prop="date" label="序号" align="center">
            <template #default="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="sample_category" label="样品类别" align="center">
          </el-table-column>
          <el-table-column prop="test_parms" label="检测参数" align="center">
            <template #default="scope">
              <div>
                <span v-show="scope.row.test_parms_type === 1">*</span>
                {{ scope.row.test_parms }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="test_method" label="检测依据" align="center">
          </el-table-column>
          <el-table-column prop="analysis_names" label="分析人" align="center">
          </el-table-column>
          <el-table-column prop="check_name" label="校核人" align="center">
          </el-table-column>
          <el-table-column prop="notes" label="备注" align="center">
          </el-table-column>
        </el-table>
      </el-card>
    </el-scrollbar>
    <el-card class="box-card" style="margin-top: 30px">
      <div style="display: flex;justify-content: flex-end;">
        <el-button>拒绝</el-button>
        <el-button type="primary" @click="handleConfirmReceipt">确认接收</el-button>
      </div>
    </el-card>
    <!--      <div class="pagination">-->
    <!--        <el-pagination-->
    <!--            background-->
    <!--            layout="prev, pager, next"-->
    <!--            :total="20">-->
    <!--        </el-pagination>-->
    <!--      </div>-->
    <!--    表格内容-->
    <!--      <div class="pagination">-->
    <!--        <el-pagination-->
    <!--            background-->
    <!--            layout="prev, pager, next"-->
    <!--            :total="20">-->
    <!--        </el-pagination>-->
    <!--      </div>-->
  </div>

</template>

<style scoped lang="scss">
.card {
  padding: 20px 25px;
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.syc-flex {
  display: flex;
}

.syc-flex-align-center {
  margin: 10px 0;
  align-items: center;
}

.syc-flex-justify-center {
  justify-content: center;
}

</style>
